<template>
  <el-dialog v-model="dialogPromoteVisible" title="赋权操作" center width="30%">
    <el-radio-group v-model="radio" class="ml-4">
      <el-radio label="产品管理员" size="large">产品管理员</el-radio>
      <el-radio label="用户管理员" size="large">用户管理员</el-radio>
      <el-radio label="消息管理员" size="large">消息管理员</el-radio>
    </el-radio-group>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmPromote">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { updateUserToAdminAPI, getUserInfoAPI } from '../../../api/userinfo'
import { ElMessage } from 'element-plus'
import { tracking } from '../../../utils/operate.js'

const dialogPromoteVisible = ref(false)
const userId = ref()


const props = defineProps<{
  closeDialog: Function,

}>()


// 从父组件注入方法
const getFirstPage = inject('getFirstPage', () => { }) as () => void
const open = (id) => {
  dialogPromoteVisible.value = true
  userId.value = id
  getName(id)
}

let userName = ref()

// 获取用户姓名以便 传给 tracking
const getName = async (id) => {
  const res = await getUserInfoAPI(id)
  if (res.data.status === 0) {
    userName.value = res.data.data.name
  }
}

const radio = ref()
const confirmPromote = async () => {
  const res = await updateUserToAdminAPI({ id: userId.value, identity: radio.value })

  if (res.data.status == 0) {
    ElMessage({
      message: '赋权管理员成功',
      type: 'success',
    })
    dialogPromoteVisible.value = false
    props.closeDialog()
    getFirstPage()
    tracking("用户管理", `赋权该用户为${radio.value}`,userName.value, "高级")

  } else {
    ElMessage.error('赋权管理员失败')
    dialogPromoteVisible.value = false
  }

}


defineExpose({
  open
})


</script>
<style lang="scss" scoped>
.el-radio-group {
  display: flex;
  justify-content: center;
}
</style>